<template>
  <i-navBar bgColor="transparent" title="" />
  <view class="share_friend">
    <view class="share_friend_content">
      <!-- <image :src="qrImg" mode="widthFix" class="qr_img"></image> -->
      <canvas
        id="canvas"
        canvas-id="canvas"
        style="width: 200px; height: 200px"
      ></canvas>

      <i-buttons
        radius="48rpx"
				color='#fff'
				border="none"
        bgColor="linear-gradient( 90deg, #FFB413 0%, #FF9A00 100%)"
        class="share_friend_content_btn"
        @click="download"
        >下载</i-buttons
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import {
  copyStr,
  getSystemInfoSync,
  saveImg,
  showTost,
} from "../../utils/common";
import { getInvitationInfo } from "../../api/user";
import UQRCode from "uqrcodejs";
import useStore from "../../stores/index";
import { baseURL } from "../../utils/base_url";

const store = useStore();
const userInfo = computed(() => store.userInfo) as any;

const qr = new UQRCode();
const {
		screenWidth = 750,
		screenHeight = 1334
	} = getSystemInfoSync()

const invitation = ref("");
const current = ref(0);
const shareURL = ref("");
const qrImg = ref("");
const qrcode = `${baseURL}/#/pages/user/user?invitationCode=${userInfo.value.mobile}`;

const ctx = uni.createCanvasContext("canvas");
const shareImg = uni.createCanvasContext("shareImg");

const share = () => {
  console.log("分享");
};

const download = () => {
	uni.canvasToTempFilePath({
			x: 0,
			y: 0,
			width: 200,
			height: 200,
			destWidth: 200,
			destHeight: 200,
			canvasId: 'canvas',
			success: (res) => {
				// qrImg.value = res.tempFilePath
				sendImg(res.tempFilePath || '')
			},
			fail: () => {
				
			}
		})
};

const sendImg = (url: string) => {
		// shareImg.drawImage(url, 0, 0, screenWidth, screenWidth * 1200 / 750);
		shareImg.drawImage(url, uni.upx2px(90), uni.upx2px(930), 80, 80);
		shareImg.draw(false, () => {
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: 200,
				height: 200,
				// width: screenWidth,
				// height: screenWidth * 1200 / 750,
				// destWidth: screenWidth * 2,
				// destHeight: screenWidth * 1200 / 750 * 2,
				canvasId: 'canvas',
				success: (res) => {
					saveImg(res.tempFilePath || '')
				}
			})
		})
	}


const getQR = () => {
  // 设置二维码内容
  qr.data = qrcode;
  qr.size = 200;
  // 调用制作二维码方法
  qr.make();
  qr.canvasContext = ctx;
  qr.drawCanvas();
  uni.hideLoading();
  // getimgUrl("canvas");
};
onReady(() => {
  uni.showLoading({
    title: "图片生成中...",
    mask: true,
  });
  getQR();
});
</script>

<style lang="scss" scoped>
.share_friend {
  width: 100%;
  height: 100vh;
  background: url(../../static/images/share_bg.png) top center no-repeat;
  background-size: 100% 800rpx;
  background-position: top;
  background-color: #f5f5f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .share_friend_content {
    margin-top: -100rpx;
    width: 80vw;
    height: 600rpx;
    background: url(../../static/images/share_body.png) top center no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx;
    padding: 48rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    .share_friend_content_btn {
      width: 60%;
      margin-top: 70rpx;
    }
  }
}
</style>
